<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 실습 예제</title>
<style type="text/css">
 progress{
  display: none;
 }
</style>
<script type="text/javascript">
 window.onload = function(){
  // upload 버튼을 클릭하면 파일을 업로드 한다.
  document.querySelector("button").onclick = fileUpload;
  
  if(file.files[0].size > 1024*1024*10){
   alert("최대 10M 까지만 업로드가 가능합니다. 사이즈 : " + file.files[0].size );
   return;   
  }
 };
 
 // 파일을 업로드 한다.
 function fileUpload(){
  var file = document.querySelector("input");

  //1. XMLHttpRequest 객체 생성
  var xhr = new XMLHttpRequest();
  //2. 서버로부터 응답받은 데이터 처리
  xhr.onreadystatechange = function(){
   if(xhr.readyState == 4 && xhr.status == 200){
    document.querySelector("body").innerHTML 
      += xhr.responseText;    
   }
  };
  //3. 서버에 요청하기 위한 정보 세팅
  xhr.open("POST", "fileupload.jsp", true);
  xhr.setRequestHeader("X-File-Name", file.files[0].name)
  //4. 서버에 요청하기
  xhr.send(file.files[0]);
    
 }
</script>
</head>
<body>
 <h1>XMLHttpRequest Level2를 이용한 파일 업로드</h1>
 <input type="file">
 <button>upload</button>
 <progress>0%</progress><br>
</body>
</html>